import UserDetail from '@/pages/UserInfo/UserDetail';
import ChangePassWord from '@/pages/UserInfo/ChangePassWord';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, Modal, Spin } from 'antd';
import React from 'react';
import { history, connect } from 'umi';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  constructor(props){
    super(props);
    this.state=({
      visible:false
    })
  }
  onMenuClick = (event) => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }
    if(key==='settings'){
      this.setState({visible:true})
    }
    if(key==='changePassword'){
      this.setState({visibleChangePass:true})
    }
   
  };
  onRef=(ref)=>{
    this.setState({
      modal:ref
    })
  }
  submit=()=>{
    this.state.modal.submit()
  }
  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const {visible,visibleChangePass} = this.state
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>       
          <Menu.Item key="settings">
            <UserOutlined />
            个人设置
          </Menu.Item>
          <Menu.Item key="changePassword">
          <SettingOutlined />
            修改密码
          </Menu.Item>
        
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return (<div>{currentUser && currentUser.userName ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={require('../../assets/avarge.png')} alt="avatar" />
          <span className={`${styles.name} anticon`}>{currentUser.name}</span>
        </span>
        
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    )}
    {visible&&<Modal
    visible={visible}
    width={'80%'}
    onCancel={()=>this.setState({visible:false})}
    onOk={this.submit}
    >
      <UserDetail onRef={this.onRef} rowData={{userName:currentUser.userName}} onCancel={()=>this.setState({visible:false})} disabled={true}/>
    </Modal>}
    {visibleChangePass&&<Modal
    visible={visibleChangePass}
    title={'修改密码'}
    onCancel={()=>this.setState({visibleChangePass:false})}
    onOk={this.submit}
    >
      <ChangePassWord onRef={this.onRef} rowData={{currentUser}} onCancel={()=>this.setState({visibleChangePass:false})}/>
    </Modal>}
    </div>
    )
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
